<template>
	<div>
		<!--面包屑导航-->
	 	<el-breadcrumb separator-class="el-icon-arrow-right" style="margin-bottom: 10px;">
			  <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			  <el-breadcrumb-item>权限管理</el-breadcrumb-item>
			  <el-breadcrumb-item>权限列表</el-breadcrumb-item>
		</el-breadcrumb>
		<!--卡片-->
		<el-card>
			<el-table :data="rightList" border stripe>
				<el-table-column label="#" type="index"></el-table-column>
				<el-table-column label="权限名称" prop="name"></el-table-column>
				<el-table-column label="路径" prop="path"></el-table-column>
				<el-table-column label="权限等级" prop="level">
					<template slot-scope="scope">
						<el-tag v-if="scope.row.level === '0'">标签一</el-tag>
						<el-tag v-else-if="scope.row.level === '1'" type="success">标签二</el-tag>
						<el-tag v-else="" type="warning">标签四</el-tag>
					</template>
				</el-table-column>
			</el-table>
		</el-card>
	</div>
</template>

<script  scoped>
	export default {
      name:"app",
      data(){
      	return {
      		rightList:[
      			{id:1,name:'商品管理',path:'goods',level:'0'},
      			{id:2,name:'订单管理',path:'orders',level:'0'},
      			{id:3,name:'权限管理',path:'rights',level:'2'},
      			{id:4,name:'商品列表',path:'goods',level:'0'},
      			{id:5,name:'添加商品',path:'goods',level:'2'},
      			{id:6,name:'订单列表',path:'orders',level:'0'},
      			{id:7,name:'添加订单',path:'orders',level:'2'},
      			{id:8,name:'用户列表',path:'users',level:'1'},
      			{id:9,name:'未定义',path:'',level:'1'},
      			{id:10,name:'未定义',path:'',level:'0'},
      			{id:11,name:'未定义',path:'',level:'1'}
      		]
      	}
      	
      },
      created(){
      	this.getRightsList();
      },
      methods:{
      	async getRightsList(){
      		const {data:res} = await this.$http.get("url-define",'传过去的参数');
      		if(res.status!==200){}
      		return this.$message.error("连接数据库失败,启用本地缓存");
      	}
      }
  	};
		

	
</script>

<style>
</style>